<template>
   <view class="index-container">
      <div class="top-search flex-x-start-center">
         <input class="word-input" placeholder="请输入" v-model="queryParams.deviceName" clearable/>
         <text class="tip" @click="doSearch">查询</text>
      </div>
      <mescroll-body ref="mescrollRef" top="100" :up="upOption" @init="mescrollInit" @down="downCallback" @up="upCallback">
         <h-card v-for="(item,index) in list" margin="30rpx" :key="index">
            <h-text title="电梯工号" :value="item.goodName||''"></h-text>
            <h-text title="电梯工号" :value="item.goodName||''"></h-text>
            <h-text title="电梯工号" :value="item.goodName||''"></h-text>
         </h-card>
      </mescroll-body>
      <!--查询-->
      <img src="@/static/image/search.png" class="fix-search" @click="openPopup"/>
      <uni-popup ref="hPopup" type="bottom" :safe-area="false">
         <div class="popup-container">
            <u--form ref="queryParams" :model="queryParams" labelPosition="left" labelWidth="80px">
               <u-form-item label="使用单位：">
                  <u--input v-model="queryParams.deviceName" clearable/>
               </u-form-item>
               <u-form-item label="电梯工号：">
                  <u--input v-model="queryParams.chineseName" clearable/>
               </u-form-item>
               <u-form-item label="维保日期：" borderBottom @click="handleDatePickerOpen">
                  <u--input v-model="queryParams.dateRange" disabled disabledColor="#ffffff" placeholder="请选择日期" border="none" clearable></u--input>
                  <u-icon slot="right" name="arrow-right"></u-icon>
               </u-form-item>
               <u-form-item label="维保状态：" borderBottom @click="picker.show = true">
                  <u--input v-model="queryParams.statusName" disabled disabledColor="#ffffff" placeholder="请选择" border="none"></u--input>
                  <u-icon slot="right" name="arrow-right"></u-icon>
               </u-form-item>
               <u-button text="查 询" type="primary" @click="doSearch"></u-button>
            </u--form>
         </div>
      </uni-popup>
      <!--日期范围选择-->
      <uni-datetime-picker ref="uniDatePicker" v-model="dateRange" type="daterange" @change="handleDateChange" :border="false"/>

      <!--picker-->
      <u-picker class="hpicker" itemHeight="85" :show="picker.show" :columns="picker.columns" keyName="label" @confirm="pickerConfirm" @cancel="pickerCancel" @close="pickerClose" closeOnClickOverlay></u-picker>

   </view>
</template>

<script>
 import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
 import {apiGoods} from "@/api/mock.js"

    export default {
        name: "index",
        mixins: [MescrollMixin], // 使用mixin
        data: () => {
			return {
                queryParams:{
                    deviceName:'',

                },
                list: [],
                upOption: {
                    // auto: false, //是否在初始化后,自动执行上拉回调callback; 默认true
                    noMoreSize: 3, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
                    empty: {
                        tip: '~ 搜索无结果 ~' // 提示
                    }
                },
                //弹出层
                popup:{
                    show: false,
                },
                //日期范围选择
                dateRange:[],

                picker:{
                    show: false,
                    columns:[[{label: '全部', id: ''},{label: '未开始', id: '0'}, {label: '进行中', id: '1'},{label: '已完成', id: '2'}]]
                }
			}
		},
        methods: {
            doSearch(){
                this.list = [] // 先清空列表,显示加载进度
                this.mescroll.resetUpScroll()
            },
            mescrollInit(){

				console.log('mescrollInit')
            },
            downCallback(){
				console.log('downCallback')
                // 这里加载你想下拉刷新的数据, 比如刷新轮播数据
                // loadSwiper();
                // 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.$nextTick(()=>{
					this.mescroll.resetUpScroll()
				})
            },
            /** 上拉加载*/
            async upCallback(page){
               //联网加载数据
                console.log('page',page)
                try {
                    const res = await apiGoods(page.num, page.size)
                    console.log('res',res)
                    //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
                    this.mescroll.endSuccess(res.list.length);
                    //设置列表数据
                    if(page.num == 1) this.list = []; //如果是第一页需手动制空列表
                    this.list=this.list.concat(res.list); //追加新数据
                } catch (e) {
                    //联网失败, 结束加载
                    this.mescroll.endErr();
                }
            },
            //popup
            openPopup(){
                let _ = this
                _.$refs.hPopup.open('bottom')
            },
            closePopup() {
                let _ = this
                _.$refs.hPopup.close()
            },
            //日期范围选择
            handleDatePickerOpen(){
                let _ = this
                _.$refs.uniDatePicker.show()
            },
            handleDatePickerClose(e){
                let _ = this
                console.log('maskClick事件:', e);
            },
            handleDateChange(val){
               let _ = this
                console.log('handleDateChange',val)
                _.queryParams.dateRange = val[0] + ' - ' +val[val.length-1]
                _.queryParams.beginTime = val[0]
                _.queryParams.endTime = val[val.length-1]
            },
            //picker
            pickerConfirm(val){
                let _ = this
                console.log('pickerConfirm',val)
                _.queryParams.statusName = val.value[0].label
                _.queryParams.status = val.value[0].id
                _.picker.show = false
            },
            pickerCancel(){
                let _ = this
                _.picker.show = false
            },
            pickerClose(){
                let _ = this
                _.picker.show = false
            },
        }

    }
</script>

<style lang="scss" scope>
@import 'index.scss';
</style>
